import React from 'react';
import { useRouteError, Link } from 'react-router-dom';
import { Container, Title, Text, Button, Stack, Center } from '@mantine/core';

export const ErrorPage: React.FC = () => {
  const error = useRouteError() as any;

  return (
    <Container size="md" py="xl">
      <Center style={{ minHeight: '60vh' }}>
        <Stack align="center" gap="lg">
          <Title order={1} size="h1" c="red">
            出错了！
          </Title>

          <Text size="lg" c="dimmed" ta="center">
            抱歉，发生了意外错误。
          </Text>

          {error?.statusText || error?.message ? (
            <Text size="sm" c="red" ta="center" style={{ fontFamily: 'monospace' }}>
              {error.statusText || error.message}
            </Text>
          ) : null}

          <Button component={Link} to="/" size="lg">
            返回首页
          </Button>
        </Stack>
      </Center>
    </Container>
  );
};